<!--结算规则-->
<template>
  <div class="app-container">
    <el-card>
      <el-form
        size="small"
        :inline="true"
        :model="searchForm"
        class="demo-form-inline"
      >
        <el-form-item label="产品名称">
          <el-input
            v-model="searchForm.productName"
            placeholder="请输入产品名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="计件类型">
          <el-select
            v-model="searchForm.pieceType"
            clearable
            placeholder="请选择计件类型"
          >
            <el-option
              v-for="item in stateList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="结算方式">
          <el-select
            v-model="searchForm.stlmtMethod"
            clearable
            placeholder="请选择结算方式"
          >
            <el-option
              v-for="item in stateWayList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button icon="el-icon-refresh" @click="reset">重置</el-button>
          <el-button type="primary" icon="el-icon-search" @click="getList"
            >查询</el-button
          >
        </el-form-item>
      </el-form>

      <el-button
        style="margin-bottom: 20px"
        size="mini"
        type="primary"
        icon="el-icon-plus"
        @click="addRules"
        >新建规则</el-button
      >

      <el-table
        v-loading="listLoading"
        :data="tableData.list"
        border
        size="small"
      >
        <el-table-column
          label="编号"
          type="index"
          align="center"
        ></el-table-column>
        <el-table-column label="产品名称" width="140" align="center">
          <template slot-scope="scope">
            <router-link
              :to="{
                path: '/productDetail',
                query: { id: scope.row.productId }
              }"
              class="link-type"
            >
              <span style="color: #419eff;cursor: pointer">{{
                scope.row.productName
              }}</span>
            </router-link>
          </template>
        </el-table-column>
        <el-table-column
          label="计件类型"
          prop="pieceType"
          width="80"
          align="center"
        >
          <template slot-scope="scope">
            {{ scope.row.pieceType == "ratio" ? "计件比例" : "计件定额" }}
          </template>
        </el-table-column>
        <el-table-column label="结算方式" width="120" align="center">
          <template slot-scope="scope">
            {{
              scope.row.stlmtMethod != null && scope.row.stlmtMethod == "1"
                ? "单节点结算"
                : "复合结算"
            }}
          </template>
        </el-table-column>
        <el-table-column label="结算节点佣金" width="150" align="center">
          <template slot-scope="scope">
            <div v-html="settleMoney(scope.row)"></div>
            <!--{{ settleMoney(scope.row) }}-->
          </template>
        </el-table-column>
        <el-table-column
          label="审批时效"
          prop="vertifyAging"
          width="80"
          align="center"
        ></el-table-column>
        <el-table-column label="有效时间" align="center">
          <template slot-scope="scope">
            {{ scope.row.startTime }} 至 {{ scope.row.stopTime }}
          </template>
        </el-table-column>
        <el-table-column label="结算规则" align="center">
          <template slot-scope="scope">
            <el-tooltip class="tooltip-cl" effect="dark" placement="top">
              <div style="max-width: 500px; line-height: 20px" slot="content">
                {{ scope.row.stlmtRule ? scope.row.stlmtRule : "-" }}
              </div>
              <div class="feedback-content">
                {{ scope.row.stlmtRule ? scope.row.stlmtRule : "-" }}
              </div>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="150" align="center">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="updateClick(scope.row)"
              >修改</el-button
            >
            <el-button type="text" size="small" @click="deleteClick(scope.row)"
              >删除</el-button
            >
            <el-button type="text" size="small" @click="detailClick(scope.row)"
              >详情</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        class="pageRight"
        background
        layout="total, sizes, prev, pager, next, jumper"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="searchForm.pageSize"
        :total="tableData.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      ></el-pagination>
    </el-card>

    <rules-dialog
      :detailInfo="detailObj"
      :show="detailDialogShow"
      @cancel="cancelDetail"
    ></rules-dialog>
  </div>
</template>

<script>
import rulesDialog from "./rulesDialog.vue";
import managerDetail from "../commissionSettlement/component/managerDetail.vue";
import {
  settleMentDeleteApi,
  settleMentDetailApi,
  settleMentRuleApi
} from "../../../api/commission";
const defaultSearchForm = {
  pageNum: 1,
  pageSize: 10,
  productName: "",
  pieceType: "",
  stlmtMethod: ""
};
export default {
  components: { managerDetail, rulesDialog },
  data() {
    return {
      searchForm: defaultSearchForm,
      stateWayList: [], //结算方式
      stateList: [], //计件类型
      listLoading: false,
      detailDialogShow: false,
      detailObj: {},
      tableData: {
        total: 0,
        list: []
      }
    };
  },
  async created() {
    this.stateList = await this.$getDictData("piece_type");
    this.stateWayList = await this.$getDictData("settlement_method");
    this.getList();
  },
  methods: {
    // 重置
    reset() {
      this.searchForm = {
        pageNum: 1,
        pageSize: 10,
        productName: "",
        pieceType: "",
        stlmtMethod: ""
      };
      this.getList();
    },
    // 查询
    getList() {
      this.listLoading = true;
      settleMentRuleApi(this.searchForm)
        .then(res => {
          if (res.code == 200) {
            this.tableData.list = res.data.list;
            this.tableData.total = res.data.total;
          }
        })
        .finally(() => {
          this.listLoading = false;
        });
    },
    settleMoney(row) {
      let node = {
        withdrawal: "提款结算",
        lenders: "放款结算",
        credit: "授信结算"
      };
      if (row.pieceType == "quota") {
        return (
          node[row.stlmtNode] +
          (row.stlmtAmount ? row.stlmtAmount + "元/单" : "")
        );
      }
      if (row.pieceType == "ratio" && row.stlmtMethod == "1") {
        return (
          node[row.stlmtNode] +
          (row.stlmtRatio ? row.stlmtRatio + "%(税后)" : "")
        );
      }
      if (row.pieceType == "ratio" && row.stlmtMethod == "2") {
        let str = "";
        row.stlmtNode.split(",").forEach(item => {
          if (item == "withdrawal") {
            str += `<div>${node["withdrawal"]}${row.withdrawalRatio}%(税后)</div>`;
          }
          if (item == "lenders") {
            str += `<div>${node["lenders"]}${row.lendersRatio}%(税后)</div>`;
          }
          if (item == "credit") {
            str += `<div>${node["credit"]}${row.creditRatio}%(税后)</div>`;
          }
        });
        // node[row.stlmtNode] + (row.stlmtRatio ? row.stlmtRatio+'%(税后)' : '')
        return str;
      }
    },
    // 新建规则
    addRules() {
      this.$router.push({
        path: "/commission/settlementRules/addProduct",
        query: { key: "add" }
      });
    },
    // 修改
    updateClick(row) {
      this.$router.push({
        path: "/commission/settlementRules/addProduct",
        query: { key: "update", id: row.id }
      });
    },
    // 删除
    deleteClick(row) {
      this.$confirm("是否确认删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        settleMentDeleteApi(row.id).then(res => {
          if (res.code == 200) {
            this.$message.success("删除成功！");
            this.getList();
          }
        });
      });
    },
    // 详情
    detailClick(row) {
      this.detailObj = row;
      this.detailDialogShow = true;
    },
    cancelDetail(val) {
      this.detailDialogShow = val;
    },
    handleSizeChange(val) {
      this.searchForm.pageSize = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.searchForm.pageNum = val;
      this.getList();
    }
  }
};
</script>

<style lang="scss" scoped>
.feedback-content {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
</style>
